<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console2.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        动作响应情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">响应最快的动作</div>
                                    <div class="count pear-text">踢腿</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">响应最慢的动作</div>
                                    <div class="count pear-text">顶膝</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确性得分</div>
                                    <div class="count pear-text">100</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">预测准确率</div>
                                    <div class="count pear-text">87%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        考试情况
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">目前考试最高得分</div>
                                    <div class="count pear-text">44</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">摄像头正常个数</div>
                                    <div class="count pear-text">2个</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">监考人员</div>
                                    <div class="count pear-text">4名</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">考试时间</div>
                                    <div class="count pear-text">10:10</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">识别结果</div>
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
       <!-- 
            <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <ul class="pear-card-status">
                    {% for i in disk_partitions_list %}
                        <li>
                            <p>{{ i.device }}</p>
                            <p>{{ i.fstype }}</p>
                            磁盘大小&nbsp;<span>{{ i.total }}M</span>&nbsp;&nbsp;
                            空闲大小&nbsp;<span>{{ i.free }}M</span>&nbsp;&nbsp;
                            <br/>
                            <br/>
                            已经使用&nbsp;<span>{{ i.used }}M</span>&nbsp;&nbsp;
                            使用概率&nbsp;<span>{{ i.percent }}%</span>
                            <br/>
                            <a href="javascript:;" data-id="1" class="pear-btn pear-btn-xs pear-btn-primary pear-reply">详情</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div> 
        -->
        <div class="layui-card">
            <div class="layui-card-header">考核信息</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>参考人数</th>
                        <th>100</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>得分最高人员</th>
                        <th>帅小伙</th>
                    </tr>    
                    <tr>
                        <th>得分最低人员</th>
                        <th>丑小伙</th>
                    </tr>

                    <tr>
                        <td>考试总场次</td>
                        <td>{{ system_version }}</td>
                    </tr>
                    <tr>
                        <td>考核成绩合格人数</td>
                        <td>{{ boot_time }}</td>
                    </tr>
                    <tr>
                        <td>考核成绩不合格人数</td>
                        <td>{{ up_time_format }}</td>
                    </tr>
                    <tr>
                        <td>缺考人数</td>
                        <td>{{ python_version }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--<div class="layui-card">
            <div class="layui-card-header">监考人员情况</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>监考人数</th>
                        <th>100</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>监考人员出勤率</th>
                    </tr>    
                    <tr>
                        <td>作弊场次</td>
                        <td>{{ hostname }}</td>
                    </tr>
                    <tr>
                        <td>监考时间</td>
                        <td>{{ system_version }}</td>
                    </tr>
                    <tr>
                        <td>监考科目</td>
                        <td>{{ boot_time }}</td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>
            <div class="layui-card">
                <div class="layui-card-header">考试场次信息</div>
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-testrecords" style="background-color:#ffffff;min-height:800px;"></div>
                    </div>
                </div>
            </div>
        </div>    -->
    </div>
</div>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-records');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
            title: {
              text: '响应速度 vs 完成人数',
              subtext: 'Fake Data'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['响应速度', '完成人数']
            },
            toolbox: {
              show: true,
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            calculable: true,
            xAxis: [
              {
                type: 'category',
                // prettier-ignore
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '响应速度',
                type: 'bar',
                data: [
                  2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ],
                markPoint: {
                  data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' }
                  ]
                },
                markLine: {
                  data: [{ type: 'average', name: 'Avg' }]
                }
              },
              {
                name: '完成人数',
                type: 'bar',
                data: [2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2],
                markPoint: {
                  data: [
                    { name: 'Max', value: 182, xAxis: 7, yAxis: 183 },
                    { name: 'Min', value: 2, xAxis: 11, yAxis: 3 }
                  ]
                },
                markLine: {
                  data: [{ type: 'average', name: 'Avg' }]
                }
              }
            ]
          };
          
          option && myChart.setOption(option);
        });

</script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('echarts-testrecords');
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            legend: {
              data: ['考试人数', '监考人数', '后勤人员']
            },
            xAxis: [
              {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisPointer: {
                  type: 'shadow'
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: 'Precipitation',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                  formatter: '{value} 人次'
                }
              },
              {
                type: 'value',
                name: 'Temperature',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                  formatter: '{value} 人次'
                }
              }
            ],
            series: [
              {
                name: '考试人数',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [
                  2, 4, 7, 23, 25, 76, 135, 162, 32, 20, 6, 3
                ]
              },
              {
                name: '监考人数',
                type: 'bar',
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [
                  2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2
                ]
              },
              {
                name: '平均得分',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                  valueFormatter: function (value) {
                    return value + ' 人次';
                  }
                },
                data: [2, 2, 3, 4, 6, 10, 20, 23, 23, 16, 12, 6]
              }
            ]
          };
          myChart.setOption(option);
        });
</script>
</body>
</html>